﻿
@{
    ViewBag.Title = "Index";

}

@*<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&sensor=false">*@
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&sensor=false"> </script>
@*<script 
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBq4jm6US5PD4Wtzr8ZD9KjW4Sd8wdBsqY&signed_in=true&callback=map_init"></script>*@


<div class="wrap">
    <!-- 左边内容 -->
    <div id="left" class="left">

        <form class="form-horizontal" role="form">
            <h3>出行规划</h3>
            <div class="form-group">
                <label for="StartAddress" class="col-sm-4 control-label">起始地</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="StartAddress" placeholder="起始位置">
                </div>
            </div>
            <div class="form-group">
                <label for="EndAddress" class="col-sm-4 control-label">目的地</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="EndAddress" placeholder="目的地">
                </div>
            </div>
            <div class="form-group">
                <label for="TravelMode" class="col-sm-4 control-label">出行方式</label>
                <div class="col-sm-8">
                    <select  class="form-control" id="TravelMode">
                        <option value="0">汽车</option>
                        <option value="1">自行车</option>
                        <option value="2">公交</option>
                        <option value="3">走路</option>
                       
                    </select>
                </div>
            </div>
            <div class="form-group" style="display:none">
                <label for="depart" class="col-sm-4 control-label">depart--没效果</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="depart" placeholder="经过地点">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="queryGo" class="btn btn-default">查询</button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="transit-wpr" class="btn btn-default">Toggle transit layer</button>
                </div>
            </div>
            <div id="panel"></div>
        </form>
    </div>
    <!-- 右边内容 -->
    <div id="right" class="tab-content right">
        <div id="googleMap" style="width:100%;height:780px;"></div>
    </div>
</div>



<style>
    body {
        /*margin: 0;
        padding: 0;*/
        font-family: Lato,Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 1.72222;
        color: #34495e;
        background-color: #fff;
    }

    .wrap {
        min-width: 100%;
        position: relative;
        background: #eff3f6 bottom;
        min-height: 100%;
        overflow: hidden;
    }

    .left {
        margin-left: 0px;
        position: absolute;
        box-sizing: border-box;
        width: 300px;
        height: 100%;
        /*background: #4d5e70 bottom;*/
        background: #eff3f6 bottom;
    }

    .logoDiv {
        padding-top: 20px;
        padding-bottom: 20px;
        height: 70px;
        background-color: #354457;
        font-size: 17px;
        color: #fff;
        vertical-align: bottom;
    }

    .logoTitle {
        margin-left: 15px;
        line-height: 1.7;
    }



    .right {
        box-sizing: border-box;
        float: left;
        box-sizing: border-box;
        padding-left: 300px;
        overflow-y: overlay;
        overflow-x: hidden;
        clear: both;
        color: #717592;
        min-width: 100%;
        min-height: 500px;
    }

    #panel {
        overflow-x: hidden;
        overflow-y: scroll;
    }
        #panel adp-list {
            /*height:300px;
             overflow-x: hidden;
        overflow-y: scroll;*/
        }
    /*#panel .adp table{
          height:300px;
        overflow-x: hidden;
        overflow-y: scroll;
    }*/
    /*.adp, .adp table {
          height:300px;
        overflow-x: hidden;
        overflow-y: scroll;
    }*/
        .adp  {
          height:300px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
</style>

@*<script>
        function initialize() {
            var mapProp = {
                center: new google.maps.LatLng(51.508742, -0.120850),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>*@
<script>
    var directions = new google.maps.DirectionsService();  //获取路线请求的服务
    var renderer = new google.maps.DirectionsRenderer();   //路线显示

    var map, transitLayer;
    var infowindow;
    var markersArray = [];
    var from
    var to;
    var from_g;
    var to_g;
    var geocoder;
    function initialize() {   //构造地图
        var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(40.7482333, -73.8681295),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

        google.maps.event.addDomListener(document.getElementById('queryGo'), 'click', route); //获取路线单击事件

        transitLayer = new google.maps.TransitLayer();

        var control = document.getElementById('transit-wpr');
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);

        google.maps.event.addDomListener(control, 'click', function () {
            
            transitLayer.setMap(transitLayer.getMap() ? null : map);
        });


        geocoder = new google.maps.Geocoder(); //实例化地址解析

        //点击地图获取坐标
        google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(event.latLng);
        });

    }


    function searchMap_from() {
        from = document.getElementById('StartAddress').value;
        codeAddress(from);
    }

    function searchMap_to() {
        to = document.getElementById('EndAddress').value;
        codeAddress(to);
    }

    function addDepart() {   //路线途径点信息的添加
        var depart = document.getElementById('depart');
        for (var i = 0; i < 24; i++) {
            for (var j = 0; j < 60; j += 15) {
                var x = i < 10 ? '0' + i : i;
                var y = j < 10 ? '0' + j : j;
                depart.innerHTML += '<option>' + x + ':' + y + '</option>';
            }
        }
    }

    function handle() {   //地址解析获取坐标
        from = document.getElementById('StartAddress').value;
        to = document.getElementById('EndAddress').value;
        if (isNaN(from)) {

            var fn = function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        from_g = results[0].geometry.location;
                    }
                } else {
                    from_g = from;
                    alert("Geocoder failed due to: " + status);
                }

            }
            getGeocoder(from, fn)
        }

        if (isNaN(to)) {

            var fn = function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        to_g = results[0].geometry.location;
                    }
                } else {
                    to_g = to;
                    alert("Geocoder failed due to: " + status);
                }

            }
            getGeocoder(to, fn)
        }
    }

    function route() {
    
            
        var departure = document.getElementById('depart').value;
        
        var bits = departure.split(':');
        var now = new Date();
        var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;

        var time = new Date();
        time.setHours(bits[0]);
        time.setMinutes(bits[1]);

        var ms = time.getTime() - tzOffset;
        if (ms < now.getTime()) {
            ms += 24 * 60 * 60 * 1000;
        }

        var departureTime = new Date(ms);

        from_g = null;
        to_g = null;
        handle(); //获取到坐标
        preDrawRoute();

        function preDrawRoute() {
            if (!from_g || !to_g) {
                setTimeout(preDrawRoute, 10);
                return;
            }
            drawRoute();
        }

        function drawRoute() {  //路线请求内容
                    //google.maps.TravelMode.DRIVING（默认），用于表示使用道路网络的标准行车路线。
                    //google.maps.TravelMode.BICYCLING，用于请求经过骑行道和优先街道的骑行路线。
                    //google.maps.TravelMode.TRANSIT，用于请求经过公交路线的路线。
            //google.maps.TravelMode.WALKING，用于请求经过步行街和人行道的步行路线。
            var Travelmode=google.maps.TravelMode.DRIVING;
            var TM =  $("#TravelMode").val();
            if (TM == 0) {
                Travelmode = google.maps.TravelMode.DRIVING
            } else if (TM == 1) {
                Travelmode = google.maps.TravelMode.BICYCLING
            } else if (TM == 2) {
                Travelmode = google.maps.TravelMode.TRANSIT
            } else if (TM == 3) {
                Travelmode = google.maps.TravelMode.WALKING
            }
            var request = {
                origin: from_g,
                destination: to_g,
               // travelMode: google.maps.DirectionsTravelMode.DRIVING,   /*导航类型 驾驶*/
                travelMode: Travelmode, 
                provideRouteAlternatives: true,
                transitOptions: {
                    departureTime: departureTime
                }
            };

            var panel = document.getElementById('panel');
            panel.innerHTML = '';
            directions.route(request, function (response, status) {   //绘制路线
                if (status == google.maps.DirectionsStatus.OK) {
                    renderer.setDirections(response);
                    renderer.setMap(map);
                    renderer.setPanel(panel);
                } else {
                    renderer.setMap(null);
                    renderer.setPanel(null);
                }

            });
        }

    }

    function placeMarker(location) {  //点击地图在地图上某点显示坐标
        clearOverlays(infowindow); //清除地图中的标记
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
        markersArray.push(marker);
        //根据经纬度获取地址
        if (geocoder) {
            geocoder.geocode({
                'location': location
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        attachSecretMessage(marker, results[0].geometry.location, results[0].formatted_address);
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }
    }
    //在地图上显示经纬度地址
    function attachSecretMessage(marker, piont, address) {
        var message = "<b>坐标:</b>" + piont.lat() + "," + piont.lng() + "<br />" + "<b>地址:</b>" + address;
        var infowindow = new google.maps.InfoWindow({
            content: message,
            size: new google.maps.Size(50, 60)
        });
        infowindow.open(map, marker);
        if (typeof (mapClick) == "function") mapClick(piont.lng(), piont.lat(), address);
    }
    //删除所有标记阵列中消除对它们的引用
    function clearOverlays(infowindow) {
        if (markersArray && markersArray.length > 0) {
            for (var i = 0; i < markersArray.length; i++) {
                markersArray[i].setMap(null);
            }
            markersArray.length = 0;
        }
        if (infowindow) {
            infowindow.close();
        }
    }

    //地址查询
    function codeAddress(allAddress) {
        if (geocoder) {
            geocoder.geocode({
                'address': allAddress
            },
                function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var beachMarker = new google.maps.Marker({
                            map: map
                        });
                        map.setCenter(results[0].geometry.location);
                        map.setZoom(15);
                        beachMarker.setPosition(results[0].geometry.location); //显示图钉
                        attachSecretMessage(beachMarker, results[0].geometry.location, results[0].formatted_address);

                    } else {
                        alert("加载地图失败，原因为: "
                            + status);
                    }
                });
        }
    }

    function getGeocoder(allAddress, fn) {  //地址解析
        if (geocoder) {
            geocoder.geocode({
                'address': allAddress
            }, fn);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>